<template>
  <div class="support">
    <ul class="money">
      <li v-for="item in num" :class="{'active': item == value}" :key="item" @click="setValue(item)">{{item}}元</li>
    </ul>
    <group class="group">
      <x-input title="自定义" text-align="right" type="tel"  :debounce="500" :is-type="money" v-model="value" placeholder="5元~1000元" :min="1" :max="7" placeholder-align="right"></x-input>
    </group>
    <div class="action">
      <button type="button" @click="submit" :disabled="disBtn">确定</button>
    </div>
  </div>
</template>
<script>
import { Group, XInput } from 'vux'
import api from '@/api/contract'
import pingpp from 'pingpp-js'
export default {
  components: {
    Group,
    XInput
  },
  data () {
    return {
      userId: '',
      activityId: '',
      num: [10, 20, 50, 100, 200, 500],
      value: '',
      money: function (value) {
        return {
          valid: /^\d+(?:\.\d{1,2})?$/.test(value) && value >= 5 && value <= 1000,
          msg: '金额在5元至1000元之间,最多两位小数！'
        }
      },
      disBtn: false
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.userId = this.$route.query.userId
      this.activityId = this.$route.query.activityId
    },
    // 自定义金额
    setValue (val) {
      this.value = val
    },
    // 支付按钮
    submit () {
      if (this.value > 1000 || this.value < 5 || !(/^\d+(?:\.\d{1,2})?$/.test(this.value))) {
        this.$vux.toast.text('金额在5元至1000元之间,最多两位小数！！', 'center')
        return false
      }
      if (this.disBtn) {
        return false
      }
      this.disBtn = true
      api.sponsor({
        userId: this.userId,
        activityId: this.activityId,
        amount: this.value,
        channel: 'wx_pub'
      }).then((res) => {
        this.disBtn = false
        if (res.data.code === 200) {
          this.pingppAction(res.data.data.charge)
        } else {
          this.$vux.toast.text('赞助跑班失败，请稍后重试！', 'center')
        }
      }).catch(() => {
        this.disBtn = false
      })
    },
    // ping++支付
    pingppAction (object) {
      let _this = this
      pingpp.createPayment(object, function (result, err) {
      // object 需是 Charge/Order/Recharge 的 JSON 字符串
      // 可按需使用 alert 方法弹出 log
        // alert.log(result)
        // alert(err.msg)
        // alert(err.extra)
        if (result === 'success') {
          // 只有微信公众号 (wx_pub)、微信小程序（wx_lite）、QQ 公众号 (qpay_pub)支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL
          _this.$vux.toast.text('赞助跑班成功！', 'center')
          setTimeout(() => {
            _this.$router.push({path: '/contract', query: {activityId: _this.activityId}})
          }, 1000)
        } else if (result === 'fail') {
          // Ping++ 对象 object 不正确或者微信公众号/微信小程序/QQ公众号支付失败时会在此处返回
          _this.$vux.toast.text('赞助跑班失败，请稍后重试！', 'center')
        } else if (result === 'cancel') {
          // 微信公众号、微信小程序、QQ 公众号支付取消支付
          _this.$vux.toast.text('赞助跑班失败，请稍后重试！', 'center')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.support{
  .money{
    overflow: hidden;
    padding: 2rem 1rem 0 1rem;
    li{
      width: 29%;
      float: left;
      margin: 1rem 2%;
      text-align: center;
      border: 1px solid #ccc;
      height: 4rem;
      line-height: 4rem;
    }
    .active{
      background-color: #15BE77;
      color: #fff;
      border-color: #15BE77;
    }
  }
  .group{
    margin: 0 2rem;
    input{
      color: #15BE77;
    }
    
  }
  .action{
    margin: 3rem 2rem;
    button{
      width: 100%;
      height: 5rem;
      color: #fff;
      background-color: #15BE77;
      font-size: 2rem;
      border:none;
      border-radius: 3px;
    }
  }
}
</style>
